<template>
  <div>
    <div class="cjy-date-outer">
      <div class="cjy-data-picker-header" style="height: 1rem"></div>
      <ul style=" justify-content: space-around;width: 100% ;display: inline-flex;display: flex;padding:1% 2%;">
        <li class="cjy-data-picker-item cjy-data-picker-title" v-for="(item ,index ) in title">
          <div>{{item.day}}</div>
        </li>
      </ul>
      <ul class="cjy-ul" style=" width: 100% ;padding:1% 2%;">
        <li class="cjy-data-picker-item" v-for="(item ,index ) in 35">
          <div @click="changeActiveDate() ">
            <div style="position:relative;padding: 0.05rem;height: 100%;width:100%;">
              <div class="cjy-inner-slot-item">
                <span class="cjy-date-text">12</span>
                <div class="cjy-date-annotation">
                  <span>今天</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  // import Hello from './components/Hello'

  export default {
    data () {
      return {
        title: [{day: "日"},
          {day: "一"},
          {day: "二"},
          {day: "三"},
          {day: "四"},
          {day: "五"},
          {day: "六"}],
        acitveDate: 0
      }
    },
    components: {},

    methods: {
      changeActiveDate (index) {
        acitveDate = index

      }
    }
  }
</script>

<style>
  .cjy-date-outer {
    border: 0px solid black;
    width: 80%;
    background: white;
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(65, 65, 65, 0.3);
  }

  .cjy-ul:after {
    content: '';
    display: block;
    clear: both;
  }

  .cjy-data-picker-title, .cjy-data-picker-item {

    width: 14.2%;
    height: 0;
    position: relative;
    float: left;
  }

  .cjy-data-picker-item > div, .cjy-data-picker-title > div {

    width: 100%;
    height: 100%;
    position: absolute;
  }

  .cjy-data-picker-item {
    padding-bottom: 13%;
  }

  .cjy-data-picker-title {
    padding-bottom: 7%;
    font-size: 0.7rem;
  }

  cjy-data-picker-item-text {
    font-size: 0.8rem;
  }

  .cjy-active {
    box-shadow: inset 0 0 5px rgba(33, 33, 33, 0.5);
  }

  .cjy-date-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgb(139, 135, 129)
  }

  .cjy-inner-slot-item {
    width: 100%;
    height: 100%;
    position: relative;
    background: #b9bac025;
    border-radius: 5px;
  }

  .cjy-date-annotation {
    font-size: 0.4rem;
    position: absolute;
    bottom: 0;
    width: 100%;
  }


</style>
